<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="130px">
                <el-col :span="18">
                    <el-form-item label="公司名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入公司名称" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司注册码" prop="idCode">
                        <el-input v-model="formData.idCode" placeholder="请输入公司注册码" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司法人" prop="legalPerson">
                        <el-input v-model="formData.legalPerson" placeholder="请输入公司法人" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司类型" prop="type">
                        <el-radio-group v-model="formData.type" size="medium">
                            <el-radio v-for="(item, index) in typeOptions" :key="index" :label="item.dictValue">
                                {{item.dictLabel}}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="formData.phone" placeholder="请输入联系电话" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司邮箱" prop="email">
                        <el-input v-model="formData.email" placeholder="请输入公司邮箱" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司地址" prop="address">
                        <el-input v-model="formData.address" placeholder="请输入公司地址" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司网址" prop="website">
                        <el-input v-model="formData.website" placeholder="请输入公司网址" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="经营范围" prop="companyRegistry">
                        <el-input v-model="formData.companyRegistry" type="textarea" placeholder="请输入经营范围"
                                  show-word-limit
                                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="公司Logo" prop="logoWeb">
                        <el-upload ref="logoWeb"
                                   :file-list="logoWebfileList"
                                   :action="logoWebAction"
                                   :auto-upload="false"
                                   :limit="1"
                                   :on-exceed="OnLogoExceed"
                                   :before-upload="logoWebBeforeUpload"
                                   list-type="picture-card"
                                   accept="image/*" >
                            <i class="el-icon-plus"></i>
                            <div slot="tip" class="el-upload__tip">只能上传不超过 5MB 的image/*文件</div>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="附件" prop="appendixFile">
                        <el-upload ref="appendixFile"
                                   :file-list="appendixFilefileList"
                                   :action="appendixFileAction"
                                   :auto-upload="false"
                                   :limit="10"
                                   :on-exceed="OnExceed"
                                   multiple
                                   :before-upload="appendixFileBeforeUpload">
                            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">最多只能上传10个文件，单个文件大小不超过 10MB</div>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm" :loading="loginLoading">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>
<script>
    import {addCompany} from "@/api/organization/company.js";

    export default {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    name: '',
                    idCode: '',
                    legalPerson: '',
                    type: '系统公司',
                    phone: '',
                    email: '',
                    address: '',
                    website: '',
                    companyRegistry: undefined,
                    logoWeb: null,
                    appendixFile: null,
                },
                realFormData: new FormData(),
                rules: {
                    name: [{
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur'
                    }],
                    idCode: [{
                        required: true,
                        message: '请输入公司注册码',
                        trigger: 'blur'
                    }],
                    legalPerson: [{
                        required: true,
                        message: '请输入公司法人',
                        trigger: 'blur'
                    }],
                    type: [{
                        required: true,
                        message: '公司类型不能为空',
                        trigger: 'change'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }],
                    email: [],
                    address: [],
                    website: [],
                    companyRegistry: [{
                        required: true,
                        message: '请输入经营范围',
                        trigger: 'blur'
                    }],
                },
                logoWebAction: process.env.VUE_APP_BASE_API + "/common/upload",
                logoWebfileList: [],
                appendixFileAction: process.env.VUE_APP_BASE_API + "/common/upload",
                appendixFilefileList: [],
                typeOptions: [],
                loginLoading: false
            }
        },
        computed: {},
        watch: {},
        created() {
            this.getDicts("sys_company_type").then(response => {
                this.typeOptions = response.data;
            });
        },
        mounted() {
        },
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        let app = this;
                        app.loginLoading = true;
                        setTimeout(function () {
                            //上传函数，如果把提交函数用在http-request钩子中，
                            // fileList多长就执行请求多少次接口，依旧是无法做到只请求一次上传多文件
                            //  用FormData存放上传文件
                            app.realFormData.append("name",app.formData.name);
                            app.realFormData.append("idCode",app.formData.idCode);
                            app.realFormData.append("legalPerson",app.formData.legalPerson);
                            app.realFormData.append("type",app.formData.type);
                            app.realFormData.append("phone",app.formData.phone);
                            app.realFormData.append("email",app.formData.email);
                            app.realFormData.append("address",app.formData.address);
                            app.realFormData.append("website",app.formData.website);
                            app.realFormData.append("companyRegistry",app.formData.companyRegistry);
                            //进行elementUi上传组件的提交触发
                            app.$refs['logoWeb'].submit();
                            app.$refs['appendixFile'].submit();

                            addCompany(app.realFormData).then(response => {
                                if (response.code === 200) {
                                    app.msgSuccess("新增公司成功！");
                                } else {
                                    app.msgError(response.msg);
                                }
                            });
                            app.realFormData = new FormData();
                        },1000);
                        app.loginLoading = false;
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            logoWebBeforeUpload(file) {
                let isRightSize = file.size / 1024 / 1024 < 5
                if (!isRightSize) {
                    this.$message.error('文件大小超过 5MB')
                }
                let isAccept = new RegExp('image/*').test(file.type)
                if (!isAccept) {
                    this.$message.error('应该选择image/*类型的文件')
                }

                if (isRightSize && isAccept) {
                    this.realFormData.append('logoWebFile', file);
                    return false;
                } else {
                    return false;
                }
            },
            appendixFileBeforeUpload(file) {
                let isRightSize = file.size / 1024 / 1024 < 10
                if (!isRightSize) {
                    this.$message.error('文件大小超过 10MB')
                }

                if (isRightSize) {
                    this.realFormData.append('appendixFile', file);
                    return false;
                } else {
                    return false;
                }
            },
            OnExceed(file, fileList) {
                this.$message.error(`最多只能上传10个文件!`);
            },
            OnLogoExceed(file, fileList) {
                this.$message.error(`只能上传1张图片!`);
            }
        }
    }

</script>
<style>
    .el-upload__tip {
        line-height: 1.2;
    }

</style>
